---
title: Посібник з Міграції
---

# Посібник з Міграції

## Міграція RainbowKit

### Зміни, що розривають сумісність у 2.x.x

Пірингові залежності [wagmi](https://wagmi.sh) і [viem](https://viem.sh) досягли версії `2.x.x` з критичними змінами.

Дотримуйтесь наведених нижче кроків для міграції.

**1. Оновіть RainbowKit, `wagmi`, і `viem` до останніх версій**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. Встановіть `@tanstack/react-query` як додаткову залежність**

З Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) є обов'язковою піринговою залежністю.

Встановіть його з наступною командою:

```bash
npm i @tanstack/react-query
```

**3. Оновіть конфігурації RainbowKit і Wagmi**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Перевірте зміни, що розривають сумісність у `wagmi` і `viem`**

Якщо ви використовуєте хуки `wagmi` та дії `viem` у вашому dApp, вам потрібно виконати інструкції з міграції для v2:

- [Інструкція з міграції для Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Критичні зміни Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Зміни у RainbowKit

**1. Покращене поводження для гаманців EIP-6963**

Гаманці, які підтримують новий стандарт підключення EIP-6963 (включаючи Rainbow, MetaMask та інші) тепер автоматично з'являтимуться у розділі `Встановлені` під час роботи в Connect Wallet. Це гарантує, що користувачі завжди зможуть знайти свої улюблені гаманці та підключити їх до dApp без конфліктів або кнопок резервного копіювання.

Розробники продовжують мати повний контроль над списком кастомних гаманців, щоб підкреслити бажані гаманці для кінцевих користувачів. Публікація `injectedWallet` і `walletConnectWallet` у вашому списку підтримує всі платформи.

**2. Конфігурація Wagmi з використанням getDefaultConfig**

Цей новий API спрощує досвід конфігурації та замінює потребу використовувати Wagmi's `createConfig` безпосередньо. Конфігурація ланцюга спрощена, включаючи передбачувані публічні провайдери для `transports`.

Список гаманців за замовчуванням буде автоматично включено, що виключає потребу використовувати `getDefaultWallets` та `connectorsForWallets`.

Ви можете створити список кастомних гаманців, передаючи імпортовані або кастомні конектори гаманців до `wallets`. Не потрібно більше створювати екземпляри конекторів гаманців і передавати `projectId` та `chains`.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Вам більше не потрібно передавати `chains` для `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**Користувацькі Мережі**

Тип `Chain` змінено відповідно до Wagmi v2 і продовжує підтримувати метадані RainbowKit `iconUrl` та `iconBackground`.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Приклад з `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

Приклад з `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**Кастомні Гаманці**

Конектори гаманців RainbowKit зазнали значних змін для підтримки Wagmi v2. Зверніться до [оновленої документації](https://www.rainbowkit.com/docs/custom-wallets) та [прикладу конектора](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) для оновлення будь-яких кастомних конекторів гаманців у вашому dApp.

Конектори гаманців тепер також підтримують стандарт EIP-6963 з `rdns` властивістю. Переконайтеся, що вона заповнена, щоб уникнути дубльованих посилань на гаманці, що підтримують EIP-6963 у вашому списку гаманців.

### Зміни, що розривають сумісність у 1.x.x

#### Оновлено до wagmi v1

Залежність [wagmi](https://wagmi.sh) була оновлена до версії `1.x.x`.

Дотримуйтесь наведених нижче кроків для міграції.

**Оновіть RainbowKit та wagmi до останньої версії**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. Встановіть `viem` як додаткову залежність**

wagmi v1 вимагає `viem` як додаткову залежність. Встановіть її за допомогою наступної команди:

```bash
npm i viem
```

**3. Переконайтеся у сумісності збирача та поліфіллів**

Дивіться наші приклади [Конфігурації Webpack для Next.js](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js) та Поліфіли для Create React App для керівництва з налаштування вашого проекту.

Додаткові посібники для Vite та Remix доступні [тут](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**4. Перевірте зміни, що розривають сумісність у `wagmi`**

Якщо ви використовуєте хуки `wagmi` у вашому додатку, вам потрібно буде слідувати посібнику міграції `wagmi` до v1.

Якщо ви використовуєте хуки `wagmi` у вашому додатку, вам потрібно буде слідувати посібнику міграції `wagmi` до v1.

### Зміни, що призводять до непрацездатності, у версії 0.12.x

Залежність wagmi була оновлена до `0.12.x`.

RainbowKit прийняв конектор `WalletConnectLegacyConnector` у `wagmi` для продовження підтримки WalletConnect v1. Підтримка WalletConnect v2 та `WalletConnectConnector` буде незабаром доступна як патч, без змін, що розривають сумісність.

Гаманці будуть автоматично переведені у майбутніх релізах.

Кожний dApp тепер повинен надати [WalletConnect Cloud](https://cloud.walletconnect.com/) `projectId` для активації WalletConnect v2. Це має бути завершено до відключення серверів моста WalletConnect v1 28 червня 2023 року. RainbowKit тихо віддасть перевагу v1 для всіх гаманців, якщо `projectId` не вказано.

Дотримуйтесь наведених нижче кроків для міграції.

#### Оновіть RainbowKit та wagmi до останньої версії

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. Надати WalletConnect Cloud projectId

Кожний dApp, що використовує WalletConnect, тепер потребує отримання `projectId` з [WalletConnect Cloud](https://cloud.walletconnect.com/). Це абсолютно безкоштовно і займає лише кілька хвилин.

Подайте `projectId` до `getDefaultWallets` та індивідуальних конекторів гаманців RainbowKit наступним чином:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### Зламні зміни 0.11.x

Залежність wagmi була оновлена до версії `0.11.x`.

Дотримуйтесь наведених нижче кроків для міграції.

#### Оновіть RainbowKit та wagmi до останньої версії

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. Перевірте зміни, що розривають сумісність у `wagmi`

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

### Зміни, що призводять до невідповідностей у версії 0.10.x

Залежність wagmi peer була оновлена до `0.10.x`.

Дотримуйтесь наведених нижче кроків для міграції.

#### Оновіть RainbowKit та wagmi до останньої версії

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. Перевірте зміни, що розривають сумісність у `wagmi`

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

### Зміни, що призводять до невідповідностей у версії 0.9.x

Залежність wagmi peer була оновлена до `0.9.x`.

Дотримуйтесь наведених нижче кроків для міграції.

#### Оновіть RainbowKit та wagmi до останньої версії

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. Перевірте зміни, що розривають сумісність у `wagmi`

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

### Зміни, що призводять до невідповідностей у версії 0.8.x

Залежність wagmi peer була оновлена до `0.8.x`.

Дотримуйтесь наведених нижче кроків для міграції.

#### Оновіть RainbowKit та wagmi до останньої версії

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. Перевірте зміни, що розривають сумісність у `wagmi`

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

### Зміни, що розривають сумісність, версії 0.7.x

Якщо ви створюєте користувацький список гаманців, тепер потрібно імпортувати кожен гаманець окремо для зменшення розміру бандла. Зворотна сумісність зі Steakwallet видалена. Використовуйте Omni замість цього.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

Зміни, що розривають сумісність, версії 0.4.x

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### RainbowKit оновив залежність `wagmi` до версії `0.5.x`.

RainbowKit оновив залежність `wagmi` до версії `0.5.x`.

Дотримуйтесь наведених нижче кроків для міграції.

#### Оновіть залежності

Оновіть RainbowKit та wagmi до останньої версії

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. Перевірте зміни, що розривають сумісність у `wagmi`

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

Якщо ви використовуєте хуки `wagmi` у вашій програмі, вам потрібно перевірити, чи ваша програма була змінена через невідповідності у `wagmi`.

### Зміни 0.3.x, що призводять до несумісності

Вилучено параметр `chainId` з `createConnector` у типі `Wallet`.

**Всі вбудовані гаманці використовують новий API. Більшість споживачів не будуть зазнавати змін. Ця зміна стосується лише тих, хто створив/споживав [кастомні гаманці](/docs/custom-wallets).**

Якщо ви раніше отримували URL-адреси RPC з `chainId` у `createConnector`, тепер ви можете видалити цю логіку, оскільки `wagmi` тепер обробляє URL-адреси RPC внутрішньо, коли використовується з `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### Зміни 0.2.x, що призводять до несумісності

RainbowKit оновив залежність `wagmi` до версії `^0.4`.

Дотримуйтесь наведених нижче кроків для міграції.

#### Оновіть залежності

Оновіть RainbowKit та wagmi до останньої версії

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### Імпортуйте `configureChains` з wagmi замість RainbowKit:

Імпортуйте `configureChains` з wagmi замість RainbowKit:

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### Перенесіть провайдерів

RainbowKit більше не експортує API `apiProvider`. Замініть його бажаним провайдером з wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

Імпортуйте `alchemyProvider` з `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

Імпортуйте `infuraProvider` з `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

Імпортуйте `jsonRpcProvider` з `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Публічний провайдер

Імпортуйте `publicProvider` з `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### Перейменуйте провайдер wagmi

Перейменуйте `WagmiProvider` на `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

І це все! 🌈
